<template>
    <div class="jianzhan-content">
        <crumb :name="$t('positionLevel.positionLevel')"></crumb>
        <div class="content">
            <el-button type="primary"
                       icon="el-icon-plus"
                       style="float: left;margin-top: 10px;"
                       @click="open"
                       size="small">{{$t('add')}}
            </el-button>
            <div class="table-wrapper">
                <el-table
                        :data="positionList"
                        border
                        stripe
                        style="width: 100%;margin-top: 10px;">
                    <el-table-column
                            prop="positionName"
                            :label="$t('positionLevel.name')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="positionLevel"
                            :label="$t('positionLevel.level')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="positionPrice"
                            :label="$t('positionLevel.price')"
                    >
                    </el-table-column>
                    <el-table-column
                            :label="$t('operate')"
                    >
                        <template slot-scope="scope">
                            <el-button type="text" @click="modLevel(scope.row)">{{$t('edit')}}</el-button>
                            <el-button type="text" @click="deletePos(scope.row,scope.$index)">{{$t('delete')}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog
                title="Position Level"
                :visible.sync="dialogVisible"
                width="40%"
        >
            <el-form label-width="180px">
                <el-form-item l:abel="$t('positionLevel.name')">
                    <el-input v-model="position.positionName" :placeholder="$t('positionLevel.name')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('positionLevel.level')">
                    <el-input v-model="position.positionLevel" :placeholder="$t('positionLevel.level')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('positionLevel.price')">
                    <el-currency-input v-model="position.positionPrice"
                                       :placeholder="$t('positionLevel.price')"> </el-currency-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click="submitForm">{{$t('confirm')}}</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import crumb from '../../components/common/crumb'
    import {addPositionLevel, deletePosition, getPositionList, updatePositionLevel} from "../../api/service";
    import {ERROR_OK} from "../../util/config";

    export default {
        name: "position-level",
        data() {
            return {
                dialogVisible: false,
                positionList: [],
                position: {
                    positionLevel: '',
                    positionName: '',
                    positionPrice: 0,
                    id: ''
                }
            }
        },
        created() {
            this.getPositionList()
        },
        methods: {
            modLevel(row) {
                this.position = row;
                this.dialogVisible = true
            },
            clear() {
                this.position = {
                    positionLevel: '',
                    positionName: '',
                    positionPrice: 0,
                    id: ''
                }
            },
            open() {
                this.clear();
                this.dialogVisible = true
            },
            async deletePos(row,index){

                this.$confirm('Do you want to delete ?','warning',{
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No',
                    type: 'warning'
                }).then(async ()=>{
                    const {status } = await deletePosition(row.id);
                    if(status === ERROR_OK) {
                        this.positionList.splice(index,1)
                        this.$message.success('delete success')
                    }
                }).catch(()=>{
                    this.$message.error('Delete cancel')
                })


            },
            async submitForm() {

                const {id, positionName, positionLevel, positionPrice} = this.position;
                if (id) {
                    const {status, msg} = await updatePositionLevel({id, positionName, positionLevel, positionPrice});
                    if (status === ERROR_OK) {
                        this.$message.success('update success');
                        this.dialogVisible = false;
                        this.clear()
                    } else {
                        this.$message.error(msg);
                    }
                } else {
                    const {status, msg} = await addPositionLevel({positionName, positionLevel, positionPrice});
                    if (status === ERROR_OK) {
                        this.$message.success('add success');
                        this.getPositionList();
                        this.dialogVisible = false;
                        this.clear()
                    } else {
                        this.$message.error(msg);
                    }
                }

            },
            async getPositionList() {
                const {status, data} = await getPositionList();
                if (status === ERROR_OK) {
                    this.positionList = data
                }

            }
        },
        components: {
            crumb
        }
    }
</script>

<style scoped>

</style>